<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            var btn = document.querySelector("#btn");
            var img = document.querySelector("img");

            //当单击按钮时执行先关操作
            btn.onclick = function () {
                /* 
                访问或设置元素的属性
                -访问：getAttribute("属性名")
                -设置：setAttribute()
                
                */

                /*   alert(img.getAttribute("src"));
                  alert(img.getAttribute("width")); */


                img.setAttribute("src", "imgs/2.png");
                img.setAttribute("title", "imgs/2.png");
                img.setAttribute("width", "100px");
                img.setAttribute("class", "pic");


            }

        }
    </script>
</head>

<!-- <style>
    .pic{

    }
</style> -->

<body>


    <img src="imgs/1.png" alt="加载失败" title="图片1" width="300px" height="200px">
    <input type="button" value="改变" id="btn">

</body>

</html>